<div id="slider">
	<div id="slider-1" class="slider-content">
		<?php
		echo $View->Html()->link(
			$View->Html()->img('slider-1.jpg'),
			new PUF\Route(null, 'contents', 'detail', [116])
		);
		?>
	</div>
	<div id="slider-2" class="slider-content">
		<?php
		echo $View->Html()->link(
			$View->Html()->img('slider-2.jpg'),
			new PUF\Route(null, 'contents', 'detail', [18])
		);
		?>
	</div>
	<div id="slider-3" class="slider-content">
		<?php
		echo $View->Html()->link(
			$View->Html()->img('slider-3.jpg'),
			new PUF\Route(null, 'contents', 'detail', [33])
		);
		?>
	</div>
	<div id="slider-4" class="slider-content">
		<?php
		echo $View->Html()->link(
			$View->Html()->img('slider-4.jpg'),
			'http://facebook.com/FergieArg',
			['target' => '_blank']
		);
		?>
	</div>
	<div id="slider-5" class="slider-content">
		<?php
		echo $View->Html()->link(
			$View->Html()->img('slider-5.jpg'),
			'http://galeria.fergieargentina.com'
		);
		?>
	</div>
</div>
<script>
/*
# jQuery Slinky Slider Plugin
# ---------------------------
# Version: 1.0
# ---------------------------
# Author: samhs
# http://ohwrite.co.uk/jquery/jquery-plugin-slinky-slider/
# http://docs.jquery.com/Plugins/SlinkySlider
#
# Copyright (c) 2009 Sam Hampton-Smith
#
# Dual licensed under the MIT and GPL licenses:
# http://www.opensource.org/licenses/mit-license.php
# http://www.gnu.org/licenses/gpl.html
#
# Please view files mit.txt and gpl.txt for full license terms
# And include these two files if you redistribute this software
*/
(function($) {
	$.fn.slinkySlider = function(settings) {
		// Utility variables - do not alter
		var currentpanel;
		var panelwidth;
		var goforward = true;
		var t;
		settings = $.extend({}, $.fn.slinkySlider.defaults, settings);
		return $(this).each(function(){
			panelwidth = $(this).width();
			$(this).css("overflow","hidden");
			container = $(this);
			elheight = container.height();
			for (var i=1;i<=settings.numberofpanels;i++) {
				$(container).append("<div class='panelwrappers'><div class='panel'></div></div>");
				$(".panelwrappers:last .panel")
					.html($('#' + $(container).attr('id') + '-' + i).html())
					.parents(".panelwrappers")
					.data("number", i);
			}
			currentpanel = $(".panelwrappers:first");
			$(".panelwrappers").css({
				"width" : settings.smallsize+"px",
				"float" : "left",
				"height" : elheight+"px"});
			$(".panels").css({
				"width" : settings.largesize+"px",
				"height" : "100%"});
			$(currentpanel).css("width",settings.largesize+"px");
			$(".panelwrappers").not(":last").css("margin-right",settings.panelspacing+"px");
			$(".panelwrappers").each(function(){
				$(this).mouseover(function(){switchpanel(this);});
			});
			if (settings.doauto) t = setTimeout(function(){switchpanel(null);},settings.autotimer);
		});

		function switchpanel(newpanel) {
			if (newpanel==currentpanel) {
				// do nothing because we're already on this panel
			} else {
				if (!isOnSlider) {
					var auto = false;
					if (newpanel==null) {
						auto = true;
						if (goforward && $(currentpanel).data("number")==settings.numberofpanels) {
							goforward=false;
						}
						if (!goforward && $(currentpanel).data("number")==1) {
							goforward=true;
						}
						if (goforward) {
							newpanel = $(currentpanel).next();
						} else {
							newpanel = $(currentpanel).prev();
						}
					} else {
						$(".panelwrappers").stop();
						clearTimeout(t);
					}
					$(".panelwrappers").not(newpanel)
						.animate({width: settings.smallsize+"px"}, settings.transition, "swing");
					$(newpanel).animate({width: settings.largesize+"px"}, settings.transition, "swing");
					currentpanel = newpanel;
				}
				if (true || auto) {
					t = setTimeout(function(){switchpanel(null);}, settings.autotimer);
				}
			}
		}
	}

	$.fn.slinkySlider.defaults = {
		autotimer:4000,
		transition:1000,
		panelspacing:1,
		smallsize:62,
		numberofpanels:5,
		largesize:700,
		doauto:true,
		panelname:"panel"
	}
})(jQuery);



$(document).ready(function(){
	$("#slider").slinkySlider();
	isOnSlider = false;
	$('#slider .panelwrappers').mouseenter(function() {isOnSlider = true;}).mouseleave(function() {isOnSlider = false;});
});
</script>